<template>
  <div>
    <el-card>
      <el-button type="primary" :icon="Plus" @click="isShow = true" v-hasBtn="'addBtn'"
        >添加按钮</el-button
      >
    </el-card>
    <el-card class="card">
      <el-table border v-loading="loading" :data="btnList">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          label="按钮名称"
          align="center"
          prop="ButtonName"
        ></el-table-column>
        <el-table-column
          label="按钮值"
          align="center"
          prop="ButtonValue"
        ></el-table-column>
        <el-table-column
          label="按钮描述"
          align="center"
          prop="ButtonContent"
        ></el-table-column>
        <el-table-column label="创建时间" align="center">
          <template #default="{ row }">
            {{ formatDate(row.CreateAt) }}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" align="center">
          <template #default="{ row }">
            {{ formatDate(row.UpdateAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" fixed="right">
          <template #default="{ row }">
            <el-button
              type="info"
              size="small"
              :icon="Edit"
              @click="editBtn(row._id)"
              v-hasBtn="'updateBtn'"
              >编辑</el-button
            >
            <el-popconfirm
              :title="`你确定删除${row.ButtonName}吗?`"
              @confirm="deleteBtn(row._id)"
            >
              <template #reference>
                <el-button type="danger" :icon="Delete" size="small" v-hasBtn="'deleteBtn'"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 30, 40]"
        background
        layout="jumper,prev, pager, next,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <AddButton
      v-model="isShow"
      v-model:btnid="btnid"
      @getBtnList="getBtnList"
    ></AddButton>
  </div>
</template>

<script setup>
defineOptions({
  name: "BtnManger",
});
import { ref, onMounted } from "vue";
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
import AddButton from "./AddButton/index.vue";
import { deleteBtnAPI, getBtnListAPI } from "@/api/btn";
import { formatDate } from "@/utiles/time";
import { ElMessage } from "element-plus";
let pageNo = ref(1);
let pageSize = ref(10);
let total = ref(0);
let isShow = ref(false);
let loading = ref(false);
let btnList = ref([]);
let btnid = ref("");
onMounted(() => {
  getBtnList();
});
const handleSizeChange = (val) => {
  getBtnList();
};
const handleCurrentChange = (val) => {
  getBtnList();
};
//获取按钮列表
const getBtnList = async () => {
  loading.value = true;
  let result = await getBtnListAPI(pageNo.value, pageSize.value);
  if (result.code == 200) {
    btnList.value = result.data.list;
    total.value = result.data.total;
    loading.value = false;
  }
};
//修改
const editBtn = (id) => {
  btnid.value = id;
  isShow.value = true;
};
//删除按钮
const deleteBtn = async (id) => {
  let result = await deleteBtnAPI(id);
  if (result.code == 200) {
    ElMessage.success("删除成功");
    getBtnList();
  }
};
</script>

<style lang="scss" scoped>
.card {
  margin-top: 10px;
  .page {
    margin: 10px 0px;
    display: flex;
    justify-content: center;
  }
}
</style>
